<template>
	<view class="msg-box">
		<view class="avatar">
			<image :src="getAvatar(msgData.avatarPath)" mode="aspectFill"></image>
		</view>
		<view class="message">
			<view class="msg-top">
				<view class="tag">
					<text>花友</text>
				</view>
				<view class="nickname">
					<text>{{msgData.nickName}}</text>
				</view>
				<view class="msg-time">
					<text>{{msgData.msgTime}}</text>
				</view>
				<view class="hits" @click="doHit(msgData.msgId)">
					<view>
						<image v-if="!ishit" src="@/static/icons/hits.png" mode="aspectFit"></image>
					</view>
					<view>
						<image v-if="ishit" src="@/static/icons/hits_h.png" mode="aspectFit"></image>
					</view>
					<view :class="{active:ishit}">
						{{msgData.hits}}
					</view> 
				</view>
			</view>
			<view class="content">
				{{msgData.msgCont}}
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		name:"MsgBox",
		props:["data"],
		computed:{
			msgData(){
				return this.data ?? this.defaultData;
			}
		},
		methods:{
			getAvatar(path){
				return "http://mnxc.xyz:8080/common/download?name="+path;
			},
			doHit(id){
				if(!this.ishit){
					this.ishit=true;
					http({
						url:'/message/upHitsById/'+id,
						method:'PUT',
						success:(res)=>{
							console.log(res.data);
							this.$emit("onHit");
						}
					})
					
				}
			}
			
		},
		data() {
			return {
				ishit:false,
				defaultData:    {
					msgId: "1611741203565428737",
					msgCont: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
					msgTime: "2023-01-07 23:07:01",
					hits: 0,
					userId: "1611365194773086209",
					lunchId: null,
					articleId: "1",
					grid: null,
					avatarPath: "/userImg/avatar.jpg",
					nickName: "fffds",
					fmsgId: null
				}
			};
		}
	}
</script>

<style lang="scss">
.active{
	color: #f41a4f;
}
.unactive{
	
}
.msg-box{
	margin: 30rpx 0;
	display: flex;
	width:100%;
	.avatar{
		flex: 1;
		border-radius: 50%;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	.message{
		flex: 4.5;
		.msg-top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.tag{
				background-color: #08ffc8;
				color: #fff7f7;
				border-radius: 3px;
				text-align: center;
				font-size: 28rpx;
				width: 80rpx;
				height: 50rpx;
				line-height: 50rpx;
			}
			.nickname{
				font-size: 24rpx;
				color: #333;
			}
			.msg-time{
				font-size: 20rpx;
				color: #aaa;
			}
			.hits{
				display: flex;
				font-size: 20rpx;
				color: #bfbfbf;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.content{
			margin-top: 15rpx;
			border: 1px solid #eee;
			border-radius: 10rpx;
			padding: 10rpx;
			font-size: 26rpx;
			color: #444;
			word-break: break-all;
		}
	}
	
}
</style>